/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper>.container {
  padding-right: 0;
  padding-left: 0;
}

.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}

.navbar-wrapper .navbar .container {
  width: auto;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 145px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}
.carousel-indicators li{
  width:30px;
  height:3px;
  border: none;
  margin: 0;
  background-color:rgba(255,255,255,.5);
}
.carousel-indicators .active{
  width:30px;
  height:3px;
  margin: 0;
  background-color:#fff;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 145px;
  background-color: #777;
}

.carousel-inner>.item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 145px;
}






/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
.carousel {
  height: 500px;
}
.carousel .item {
  height: 500px;
}
.carousel .item img{
  height: 500px;
}
  

}

@media (min-width: 1200px) {
  .carousel {
    height: 730px;
  }

  .carousel .item {
    height: 730px;
  }

  .carousel .item img {
    height: 730px;
  }
}